import React from 'react'
import {Flex, Toast} from 'antd-mobile'
import './index.scss'
import getCurrentCity from '../../utils/localtion.js'
import Filter from './components/Filter/index.js'
import request from '../../utils/api.js'

import {List, AutoSizer, WindowScroller, InfiniteLoader} from 'react-virtualized'
import HouseItem from '../../components/HouseItem/index.js'
import NoHouse from '../../components/NoHouse/index.js'
import Sticky from '../../components/Sticky/index.js'

class Find extends React.Component {

    state = {
        // 当前城市名称
        currentCity: '',
        // 列表总长度
        count: 0,
        // 列表数据
        list: [],
        // 筛选条件
        filter: {},
        // 判断接口调用是否完成
        isFinished: false
    }

    componentDidMount() {
        // 初始化当前城市名称
        getCurrentCity().then(city => {
            this.setState({
                currentCity: city.label
            })
        })
        // 页面首次加载时调用接口
        // this.onFilter({})
        this.loadMoreRows({
            startIndex: 1,
            stopIndex: 10
        })
    }

    // 获取筛选条件参数
    onFilter = async (filter) => {
        // 调用后台接口发送请求
        // 修改筛选条件后，需要清空之前的数据，然后重新加载新的数据
        this.setState({
            filter: filter,
            count: 0,
            list: []
        }, () => {
            // 重新加载新的数据
            this.loadMoreRows({
                startIndex: 1,
                stopIndex: 10
            })
        })
    }

    // 渲染其中一条数据
    rowRenderer = ({style, key, index}) => {
        // return <div style={style} key={key}>{'测试数据' + index}</div>
        // 如何获取当前列表数据？
        let {list} = this.state
        let itemData = list[index]
        // 如果列表滚动非常快，那么这里数据又可能刚开始获取不到，但是很快就会有数据
        if (!itemData) {
            // 当前行数据尚且没有加载完成，先提示一个临时填充位
            return (
                <div style={style} key={key}>
                    <p className='loading'></p>
                </div>
            )
        }
        return <HouseItem key={key} onClick={() => {
            // 控制路由的跳转
            this.props.history.push('/detail', {id: itemData.houseCode})
        }} style={style} {...itemData}/>
        // return <div style={style} key={key}>{'测试数据' + index}</div>
    }

    // 用于跟踪列表每一行数据的加载状态
    isRowLoaded = ({index}) => {
        const {list} = this.state
        // 双叹号用于转化为布尔值
        return !!list[index]
    }

    // 用于加载下一页数据
    loadMoreRows = async ({startIndex, stopIndex}) => {
        // 接口调用之前添加提示
        Toast.loading('正在加载...', 0)
        // 修改加载列表的状态
        this.setState({
            isFinished: true
        })
        // 这里负责调用后台接口获取分页数据
        // 返回的数据结果需要提供Promise对象
        let city = await getCurrentCity()
        return request({
            method: 'get',
            url: 'houses',
            params: {
                ...this.state.filter,
                cityId: city.value,
                start: startIndex,
                end: stopIndex
            }
        }).then(res => {
            // 获取后台接口数据
            this.setState({
                count: res.body.count,
                // 列表数据不应该覆盖，而是要合并
                list: [...this.state.list, ...res.body.list]
            }, () => {
                // 加载完成后隐藏提示
                Toast.hide()
                this.setState({
                    isFinished: false
                })
            })
        })
    }

    renderList = () => {
        return (
            <InfiniteLoader
                isRowLoaded={this.isRowLoaded}
                loadMoreRows={this.loadMoreRows}
                rowCount={this.state.count}
            >
                {({onRowsRendered, registerChild}) => (
                    <WindowScroller>
                        {({height, isScrolling, onChildScroll, scrollTop}) => (
                            <AutoSizer>
                                {({width}) => {
                                    return (
                                        <List
                                            autoHeight
                                            className='houseList'
                                            isScrolling={isScrolling}
                                            onScroll={onChildScroll}
                                            scrollTop={scrollTop}
                                            onRowsRendered={onRowsRendered}
                                            ref={registerChild}
                                            width={width}
                                            height={height}
                                            rowCount={this.state.list.length}
                                            rowHeight={120}
                                            rowRenderer={this.rowRenderer}
                                        />
                                    )
                                }}
                            </AutoSizer>
                        )}
                    </WindowScroller>
                )}
            </InfiniteLoader>
        )
    }

    render() {
        return (
            <React.Fragment>
                {/*搜索栏*/}
                <Flex className='header'>
                    <i className="iconfont icon-back"/>
                    <Flex className='search-box searchHeader'>
                        {/* 左侧白色区域 */}
                        <Flex className="search">
                            {/* 位置 */}
                            <div className="location">
                                <span className="name">{this.state.currentCity}</span>
                                <i className="iconfont icon-arrow"/>
                            </div>
                            {/* 搜索表单 */}
                            <div className="form">
                                <i className="iconfont icon-seach"/>
                                <span className="text">请输入小区或地址</span>
                            </div>
                        </Flex>
                        {/* 右侧地图图标 */}
                        <i className="iconfont icon-map"
                           onClick={() => {
                               // console.log(11)
                               this.props.history.push('/map')
                           }}
                        />
                    </Flex>
                </Flex>
                {/*筛选菜单*/}
                <Sticky height={40}>
                    <Filter onFilter={this.onFilter}/>
                </Sticky>
                {/*列表内容:必须保证list数据已经加载成功*/}
                {/*rowCount指的是列表的总长度*/}
                {/*List组件的rowCount指的是已经加载的列表数据长度*/}
                {this.state.list.length > 0 && (this.renderList())}
                {!this.state.isFinished && this.state.list.length === 0 && <NoHouse>没有房源数据...</NoHouse>}

                <div className='toTop' onClick={() => {
                    // 点击时控制回到顶部
                    window.scrollTo(0, 0)
                }}>
                    ∧
                </div>
            </React.Fragment>
        )
    }
}

export default Find